<template>
	<view>
		<!--顶部开始  -->
		<view class="pl-20r pr-20r h-80r flex justify-end items-center">
			<!-- 			<view class="flex-8 ">
				<view class="text-center rounded-35r leading-70r w-70r h-70r third-bg-color">
					<text class=" text-50r iconfont icon-saoyisao"></text>
				</view>
			</view>
			<view class="box-shadow flex-1 mr-10r text-center rounded-35r leading-70r w-70r h-70r third-bg-color">
				<text class=" text-50r iconfont icon-tongzhi"></text>
			</view> -->
			<view @click="goSetting" class="box-shadow text-center rounded-35r leading-70r w-70r h-70r third-bg-color">
				<text class="text-50r iconfont icon-shezhi"></text>
			</view>
		</view>
		<!--顶部 结束  -->

		<!-- 头像 -->
		<view class="flex items-center m-20r">
			<view class="flex-1">
				<image class=" h-100r w-100r rounded-50r" :src="avatar" mode="aspectFill"></image>
			</view>

			<view @click="clickLogin" class="flex-5 flex flex-col">
				<text class="text-40r font-600 main-color">{{nickname}}</text>
				<text class="text-20r">未设置签名</text>
			</view>
		</view>
		<!-- 头像 结束-->

		<!-- 获赞 动态数 关注数 粉丝数 -->
		<view class="flex items-center justify-around">
			<view class="flex flex-col items-center">
				<text class="secondy-color font-bold">1111</text>
				<text class="text-20r text-main" style="color:#A8A8A8;">动态数</text>
			</view>
			<view class="flex flex-col items-center">
				<text class="secondy-color font-bold">1111</text>
				<text class="text-20r text-main">作品数</text>
			</view>
			<view class="flex flex-col items-center">
				<text class="secondy-color font-bold">1111</text>
				<text class="text-20r text-main">关注数</text>
			</view>
			<view class="flex flex-col items-center">
				<text class="secondy-color font-bold">1111</text>
				<text class="text-20r text-main">粉丝数</text>
			</view>
		</view>
		<!-- 获赞 动态数 关注数 粉丝数 结束-->

		<!-- 收藏夹 购物车 足迹 订阅 -->
		<view class="flex flex-wrap justify-around m-20r border-solid rounded-20r border-2r"
			:style="{'border-color':theme.thirdColor}">
			<view class="text-main p-10r text-30r box-border w-350r h-150r flex items-center"
				style="border-radius:20rpx 0 0 0;border-bottom:2rpx solid #E5E5E5;">
				<text class="text-center text-60r flex-2 iconfont icon-shoucangjia"></text>
				<text class="flex-5">收藏夹</text>
				<text class="flex-1">8</text>
				<text class="flex-1 iconfont icon-youjiantou"></text>
			</view>

			<view class="w-2r" :style="{'background-color':this.theme.thirdColor}"></view>

			<view class="text-main p-10r text-30r box-border w-350r h-150r flex items-center"
				style="border-radius:0 20rpx 0 0;border-bottom:2rpx solid #E5E5E5;">
				<text class="text-center text-60r flex-2 iconfont icon-wodeguanzhu"></text>
				<text class="flex-5">关注</text>
				<text class="flex-1">8</text>
				<text class="flex-1 iconfont icon-youjiantou"></text>
			</view>

<!-- 			<view class="text-main p-10r text-30r box-border w-350r h-150r flex items-center"
				style="border-radius:20rpx 0 0 20rpx">
				<text class="text-center text-80r flex-2 iconfont icon-zuji"></text>
				<text class="flex-5">足迹</text>
				<text class="flex-1">10035</text>
				<text class="flex-1 iconfont icon-youjiantou"></text>
			</view>

			<view class="w-2r" :style="{'background-color':theme.thirdColor}"></view>

			<view class="text-main p-10r text-30r box-border w-350r h-150r flex items-center"
				style="border-radius:0 20rpx 20rpx 0">
				<text class="text-center text-60r flex-2 iconfont icon-dingyue1"></text>
				<text class="flex-5">订阅</text>
				<text class="flex-1">8</text>
				<text class="flex-1 iconfont icon-youjiantou"></text>
			</view> -->


		</view>
		<!-- 收藏夹 购物车 足迹 订阅 结束-->

		<!-- 订单 客服 设置 -->
		<view class="m-20r">
			<view @click="goSetting" class="box-border pl-10r pr-10r h-90r flex items-center">
				<view class="font-bold text-30r flex-1">设置</view>
				<view class="box-shadow text-center rounded-35r third-bg-color leading-70r h-70r w-70r">
					<text class="text-40r iconfont icon-youjiantou"></text>
				</view>
			</view>

			<view class="h-2r third-bg-color"></view>

			<view @click="aboutUs" class="box-border pl-10r pr-10r h-90r flex items-center">
				<view class="font-bold text-30r flex-1">关于我们</view>
				<view class="box-shadow text-center rounded-35r third-bg-color leading-70r h-70r w-70r">
					<text class="text-40r iconfont icon-youjiantou"></text>
				</view>
			</view>

<!-- 			<view class="h-2r third-bg-color"></view>

			<view @click="goSetting" class="box-border pl-10r pr-10r h-90r flex items-center">
				<view class="font-bold text-30r flex-1">设置</view>
				<view class="box-shadow text-center rounded-35r third-bg-color leading-70r h-70r w-70r">
					<text class="text-40r iconfont icon-youjiantou"></text>
				</view>
			</view> -->

			<view class="h-2r third-bg-color"></view>
		</view>
		<!-- 订单 客服 设置 结束-->



	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		computed: {
			avatar() {
				if (vk.getVuex('$user.userInfo._id')) {
					return vk.getVuex('$user.userInfo.avatar') || '../../static/images/默认头像.png';
				} else {
					return '../../static/images/默认头像.png';
				}
			},
			nickname() {
				if (vk.getVuex('$user.userInfo._id')) {
					return vk.getVuex('$user.userInfo.nickname') || '未设置昵称';
				} else {
					return '登录/注册';
				}
			}
		},
		methods: {
			goSetting() {
				vk.navigateTo('/pages/setting/setting');
			},
			clickLogin() {
				// if (vk.getVuex('$user.userInfo._id')) {
				// 	vk.navigateTo('/pages/profile/profile');
				// } else {
				// 	vk.navigateTo('/pages_template/uni-id/login/index/index');
				// }
				const id = vk.getVuex('$user.userInfo._id');
				vk.navigateTo({
					url: '/pages/homepage/homepage?id=' + id
				})
			},
			aboutUs(){
				vk.navigateTo({
					url: '/pages/aboutUs/aboutUs'
				})
			}
		}
	}
</script>

<style>

</style>
